/*
 * @Author: Zhouhai 497675647@qq.com
 * @Date: 2022-09-22 16:30:07
 * @LastEditors: zhouhai zhouhaib@yonyou.com
 * @LastEditTime: 2024-10-23 17:48:35
 */
import { getCodeImg } from "@/api/login";
import cache from '@/plugins/cache';
import { useStore } from '@/store';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Image, Input } from 'antd';
import { useEffect, useState } from 'react';
import { useAliveController } from 'react-activation';
import { useNavigate } from 'react-router-dom';
import './index.less';

const Login = (props: any) => {
    const { userStore } = useStore();
    const [captchaOnOff, setCaptchaOnOff] = useState<boolean>();
    const [codeUrl, setCodeUrl] = useState<string>();
    const [uuid, setUuid] = useState<string>();
    const { clear } = useAliveController()

    const initialValues = {
        username: cache.local.get("username"),
        remember: cache.local.get('remember')
    }

    console.log('initialValues', initialValues);

    const navigate = useNavigate();

    const [isloading, SetIsloading] = useState<boolean>(false);


    const onFinish = async (values: any) => {
        SetIsloading(true)
        userStore.login({ ...values, uuid }).then(async (res: boolean) => {
            if (res) {
                clear()
                await userStore.GetInfo()
                // 登录成功，判断记住我是否勾选了
                if (values.remember) {
                    cache.local.set("username", values.username);
                    cache.local.set('remember', values.remember);
                } else {
                    cache.local.remove("username");
                }
                navigate('/', { replace: true })
            } else {
                getCaptchCode()
            }
        }).finally(() => {
            SetIsloading(false)
        })

    };

    //获取验证吗
    const getCaptchCode = () => {
        getCodeImg().then((res: any) => {
            setCaptchaOnOff(res.captchaOnOff === undefined ? true : res.captchaOnOff);
            if (res.captchaOnOff) {
                setCodeUrl("data:image/gif;base64," + res.img)
                setUuid(res.uuid);
            }
        });
    }


    useEffect(() => {
        getCaptchCode();
    }, [])


    return (
        <div className='login'>
            <Form
                name="loginForm"
                style={{ padding: "25px 25px 5px 25px" }}
                className="login-form"
                initialValues={initialValues}
                onFinish={onFinish}
                size='small'
            >
                <h3 className="title">若依后台管理系统</h3>
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名' }]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                >
                    <Input.Password
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>
                {captchaOnOff === true ? (
                    <>
                        <div className="login-code">
                            <Image src={codeUrl} alt={"点击获取验证码"} onClick={getCaptchCode} className="login-code-img" preview={false} height={'auto'}/>
                        </div>
                        <Form.Item
                            name="code"
                            rules={[{ required: true, message: '请输入验证码!' }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                placeholder="验证码"
                                style={{ width: "95%" }}
                            />
                        </Form.Item>
                    </>
                ) : <></>}


                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住账号</Checkbox>
                    </Form.Item>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button" loading={isloading}>
                        登录
                    </Button>
                </Form.Item>
            </Form>
            <div className="login-footer">
                <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
            </div>
        </div>
    );
};

export default Login;
